<!DOCTYPE html>
<html lang="en">
<head>
    <title>Storage test</title>
</head>
<body>
    <h1>Storage test</h1>
    <p>
        <h2>Local Storage</h2>
        <label>Key: </label><input type="text" size="30" id="localStorageKey" />
        <label>Value: </label><input type="text" size="30" id="localStorageValue" />
        <br>
        <br>
        <input type="button" id="addLS" value="Add" />
        <input type="button" id="removeLS" value="Remove" />
        <input type="button" id="getLS" value="Get" />

        <p id="localStorageGetValue"></p>
    </p>

    <p>
        <h2>Session Storage</h2>
        <label>Key: </label><input type="text" size="30" id="sessionStorageKey" />
        <label>Value: </label><input type="text" size="30" id="sessionStorageValue" />
        <br>
        <br>
        <input type="button" id="addSS" value="Add" />
        <input type="button" id="removeSS" value="Remove" />
        <input type="button" id="getSS" value="Get" />

        <p id="sessionStorageGetValue"></p>
    </p>


</body>

<script>
    document.getElementById('addLS').addEventListener('click', function () {
        const key = getTextBoxValue("localStorageKey");
        const value = getTextBoxValue("localStorageValue");
        addValue('local', key, value);
    });

    document.getElementById('removeLS').addEventListener('click', function () {
        const key = getTextBoxValue("localStorageKey");
        removeValue('local', key);
    });

    document.getElementById('getLS').addEventListener('click', function () {
        const key = getTextBoxValue("localStorageKey");
        getValue('local', key, "localStorageGetValue");
    });

    document.getElementById('addSS').addEventListener('click', function () {
        const key = getTextBoxValue("sessionStorageKey");
        const value = getTextBoxValue("sessionStorageValue");
        addValue('session', key, value);
    });

    document.getElementById('removeSS').addEventListener('click', function () {
        const key = getTextBoxValue("sessionStorageKey");
        removeValue('session', key);
    });

    document.getElementById('getSS').addEventListener('click', function () {
        const key = getTextBoxValue("sessionStorageKey");
        getValue('session', key, "sessionStorageGetValue");
    });

    function getTextBoxValue(id) {
        const textBox = document.getElementById(id);
        if (!textBox.value)
            return "";

        return textBox.value;
    }

    function addValue(storageType, key, value) {
        if (!key)
            return;

        if (!value)
            return;

        let storage;
        if (storageType === 'local')
            storage = window.localStorage;
        else
            storage = window.sessionStorage;

        storage.setItem(key, value)
    }

    function removeValue(storageType, key) {
        if (!key)
            return;

        let storage;
        if (storageType === 'local')
            storage = window.localStorage;
        else
            storage = window.sessionStorage;

        storage.removeItem(key)
    }

    function getValue(storageType, key, resultID) {
        if (!key) {
            document.getElementById(resultID).innerHTML = "No value found for '" + key + "'";
            return;
        }

        let storage;
        if (storageType === 'local')
            storage = window.localStorage;
        else
            storage = window.sessionStorage;

        const value = storage.getItem(key);
        if (!value) {
            document.getElementById(resultID).innerHTML = "No value found for '" + key + "'";
            return;
        }

        document.getElementById(resultID).innerHTML = "Value for key '" + key + "' = " + storage.getItem(key);
    }
</script>
</html>
